<template>
  <view class="page">
    <Navbar title="登录" occupy>
      <u-icon slot="left" name="arrow-left" color="#fff" />
    </Navbar>
    <view class="page-body">
      <image :src="webSrc('/profile/static/icon-login-bg.png')" mode="scaleToFill" />
      <view class="tips">你好！欢迎登录平台</view>
      <u-text text="手机号" color="#313131" size="28rpx" margin="0 0 20rpx 0" />
      <button
        open-type="getPhoneNumber"
        class="button"
        @getphonenumber="getPhoneNumber"
        size="mini"
      >
        {{ encryption() }}
      </button>
      <!-- <u-text text="密码" color="#313131" size="28rpx" margin="40rpx 0 20rpx 0" />
      <u-input
        v-model="userForm.password"
        :placeholder="havePwd ? '请输入密码' : '请输入初始密码（选填）'"
        placeholder-style="color: #909090; font-size: 24rpx;"
        maxlength="20"
        type="password"
        color="#313131"
        font-size="28rpx"
        border="none"
        password
        clearable
      />
      <view class="forget mt-10 mb-10">
        <text @click="handleForget">忘记密码？</text>
      </view> -->
      <view class="btn f f-ac f-jc" :class="{ disabled: disabled }" @click="handleSubmit">
        登录
      </view>
    </view>
    <Wx-login v-model="showPop" @cencel="cencelPopup" @confirm="handleBind" />
  </view>
</template>
<script>
import WxLogin from "@/components/Author/index";
import { postPhone, postLogin, putNickNameAvatar } from "@/request/bindApi.js";
export default {
  components: { WxLogin },
  data() {
    return {
      havePwd: false, // 是否有密码
      haveNickName: true, // 是否有昵称
      haveAvatar: true, // 是否有头像
      userForm: {
        username: "", // 账户
        // password: "", // 密码
        code: "", // 小程序code码
      },
      showPop: false, // 完善信息
    };
  },
  computed: {
    disabled() {
      const { username, password } = this.userForm;
      return username == "" || (this.havePwd ? password == "" : "");
    },
  },
  methods: {
    // 获取手机号
    getPhoneNumber(e) {
      if (e.detail.code) {
        postPhone({ code: e.detail.code }).then((res) => {
          if (res.code == 200) {
            // this.havePwd = res.data.havePwd;
            this.haveNickName = res.data.haveNickName;
            this.haveAvatar = res.data.haveAvatar;
            this.userForm.username = res.data.phoneNumber;
          } else {
            uni.showToast({
              title: res.msg || "服务器错误",
              icon: "none",
              mask: true,
            });
          }
        });
      }
    },
    // 忘记密码
    handleForget() {
      uni.navigateTo({ url: "/pages/bind/forgetReset" });
    },
    // 手机号加密
    encryption() {
      let username = this.userForm.username;
      return username
        ? username.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")
        : "获取手机号";
    },
    // 登录
    handleSubmit() {
      if (this.disabled) return;
      uni.login({
        success: (loginRes) => {
          this.userForm.code = loginRes.code;
          postLogin(this.userForm).then((res) => {
            if (res.code == 200) {
              uni.setStorageSync("TOKEN", res.token);
              if (this.haveNickName && this.haveAvatar) {
                this.toHome();
              } else {
                uni.showToast({
                  title: "请完善信息",
                  icon: "none",
                });
                this.showPop = true;
              }
            } else {
              uni.showToast({
                title: res.msg || "服务器错误",
                icon: "none",
                mask: true,
              });
            }
          });
        },
      });
    },
    // 关闭授权弹窗
    cencelPopup(v) {
      this.showPop = false;
    },
    // 获取头像/昵称
    handleBind(val) {
      putNickNameAvatar(val).then((res) => {
        if (res.code == 200) {
          this.showPop = false;
          this.toHome();
        } else {
          uni.showToast({
            title: res.msg || "服务器错误",
            icon: "none",
            mask: true,
          });
        }
      });
    },
    // 跳转首页
    toHome() {
      uni.showToast({
        title: "登录成功",
        icon: "success",
        mask: true,
        success: () => {
          setTimeout(() => {
            uni.switchTab({ url: "/pages/tabBar/homeIndex" });
          }, 1500);
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  height: 100vh;
  overflow: hidden;
  padding: 30rpx;
  background: linear-gradient(90deg, #24de73 0%, #157dfa 100%);
  .page-body {
    position: fixed;
    height: 75%;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-top-right-radius: 60rpx;
    padding: 40rpx;
    box-sizing: border-box;
    > image {
      width: 263rpx;
      height: 346rpx;
      position: absolute;
      top: -240rpx;
      right: 80rpx;
    }
    .tips {
      position: absolute;
      top: -72rpx;
      left: 40rpx;
      font-size: 36rpx;
      font-weight: 600;
      color: #fff;
      &::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: -10rpx;
        right: -20rpx;
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
        border: 6rpx solid #c5e393;
      }
    }
    .button {
      height: 80rpx;
      line-height: 80rpx;
      width: 100%;
      background-color: #f5f5f5;
      border-radius: 16rpx !important;
      font-size: 24rpx;
      color: #909090;
      text-align: left;
      &::after {
        border: none;
      }
    }
    ::v-deep .u-input {
      padding: 20rpx !important;
      background-color: #f5f5f5;
      border-radius: 16rpx !important;
    }
    .forget {
      font-size: 24rpx;
      color: #24de73;
    }
    .btn {
      margin-top: 140rpx;
      height: 96rpx;
      width: 100%;
      background-color: #24de73;
      border-radius: 60rpx;
      font-size: 32rpx;
      color: #fff;
      font-weight: 600;
      &:active {
        background-color: #25ca6a;
      }
    }
    .disabled {
      color: #909090;
      background-color: #ebebeb;
      pointer-events: none;
      &:active {
        background-color: #ebebeb;
      }
    }
  }
}
</style>
